<template>
  <c-select
    v-bind="$attrs"
    v-on="$listeners"
    filterable
    :value="value"
    :options="options"
    @change="hangleChange"
    :props="props"
  ></c-select>
</template>

<script>
// import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    busType: String,
    level: {
      type: Number,
      default: 1,
    },
    addressCode: {
      type: String,
      default: '52',
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      props: {
        value: 'id',
        label: 'geoName',
      },
      options: [],
    }
  },
  computed: {},
  watch: {
    addressCode() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.options = []
      if (!this.addressCode || !+this.addressCode) {
        return
      }
      this.getAddress(this.addressCode, this.level).then(res => {
        this.options = res
      })
    },
    async getAddress(address = '', level = 0) {
      return this.$store.dispatch('getAddress', {
        address,
        level,
      })
    },
    hangleChange(val) {
      const select = this.options.find(item => item.id === val) || {}
      this.$emit('select', val, select.geoName || '')
    },
  },
}
</script>

<style lang="scss" scoped></style>
